<template>
  <div>
    <!-- 底部部分 -->
    <footer class="footer" v-show="list.length">
      <span class="todo-count">
        <strong>{{ num }}</strong>剩余
      </span>
      <ul class="filters">
        <li>
          <a :class="{selected:a==='all'}" href="#/" @click="pick('all')">全部</a>
        </li>
        <li>
          <a :class="{selected:a==='go'}" href="#/active" @click="pick('go')">进行中</a>
        </li>
        <li>
          <a :class="{selected:a==='over'}" href="#/completed" @click="pick('over')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clear">清除已完成</button>
    </footer>
  </div>
</template>
  
  <script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
  props: {
    list: {
      type: Array
    },
    a: "all"
  },
  methods: {
    ...mapActions("list", ["cleartick", "pickAxios"]),
    ...mapMutations("list", ["pickYou"]),
    clear() {
      this.cleartick(this.list);
    },
    pick(status) {
      this.pickAxios(status);
      this.a = status;
    }
  },
  computed: {
    ...mapGetters("list", ["num"])
  }
};
</script>
  
  <style>
</style>